<template>
  <div class="content ">
    <div style="width:100%;height:100%;position:relative;">
      <Box class="content_table" :show-header="false">
        <SortTable :columns="table.header" :data="table.data" />
      </Box>
      <div class="container_hori_divide3 content_chart">
        <Box title="事件多发路口">
          <ListInfo style="paddingTop:0.5rem;" :data="accidentProneCrossing" />
        </Box>
        <Box title="事件多发道路">
          <ListInfo style="paddingTop:0.5rem;" :data="accidentProneRoad" />
        </Box>
        <Box title="天气情况统计">
          <BarChart :data="weatherType.data" :color-array="weatherType.colorArray" />
        </Box>
      </div>
      <div class="right container_vert_divide3">
        <Box title="交通事件类型统计">
          <div class="tabs">
            <span :class="[trafficTypeDimension===0?'checked':'']" @click="getTrafficTypeData(0)">车辆维度</span>
            <div></div>
            <span :class="[trafficTypeDimension===1?'checked':'']" @click="getTrafficTypeData(1)">时间维度</span>
          </div>
          <PieChart :data="trafficType.data" :serie-name="trafficType.name" />
        </Box>
        <Box title="交通事件区域分布">
          <PieChart :data="trafficArea.data" :serie-name="trafficArea.name" />
        </Box>
        <Box title="驾驶车型统计">
          <BarChart :data="carType.data" :color-array="carType.colorArray" />
        </Box>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import Box from '@/components/Box.vue';
import SortTable from '@/components/SortTable.vue';
import ListInfo from '@/components/ListInfo.vue';
import PieChart from '@/components/PieChart.vue';
import BarChart from '@/components/BarChart.vue';
import { getYesterdayDateStr } from '@/utils/util';
import { history, typeForCar, typeForTime, area, carTypeStatic, weather, road, junction } from '@/api/traffic';
const EventBus = inject('EventBus');
let yesterdayStr = getYesterdayDateStr();
const queryTime = ref({
  startTime: yesterdayStr + ' 00:00:00',
  endTime: yesterdayStr + ' 23:59:59'
});
EventBus.on('timequery', ({ startTime, endTime }) => {
  queryTime.value.startTime = startTime;
  queryTime.value.endTime = endTime;
  getTableData();
  getChartData();
});

const table = ref({
  header: [
    {
      title: '时间',
      dataIndex: 'createTime',
      width: '18%'
    },
    {
      title: '地点',
      dataIndex: 'address',
      align: 'center',
      width: '28%'
    },
    {
      title: '事件类型',
      dataIndex: 'type',
      align: 'center',
      width: '12%'
    },
    {
      title: '事件概况',
      dataIndex: 'description',
      align: 'center',
      width: '42%'
    }
  ],
  data: []
});
const accidentProneCrossing = ref([]); // 事件多发路口数据
const accidentProneRoad = ref([]); // 事件多发道路数据
const trafficTypeDimension = ref(0);
const trafficType = ref({
  data: [],
  name: '交通事件类型统计'
});

const trafficArea = ref({
  data: [],
  name: '交通事件区域分布'
});

const carType = ref({
  data: [],
  colorArray: {
    top: ['rgba(0, 190, 255, 1)', 'rgba(6, 153, 204, 1)'],
    center: ['rgba(0, 190, 255, 1)', 'rgba(86, 209, 251, 1)', 'rgba(177, 217, 255, 1)'],
    bottom: 'rgba(68, 198, 243, 1)'
  }
});

const weatherType = ref({
  data: [],
  colorArray: {
    top: ['rgba(17, 155, 254, 1)', 'rgba(6, 131, 220, 1)'],
    center: ['rgba(17, 155, 254, 1)', 'rgba(104, 190, 253, 1)', 'rgba(202, 230, 251, 1)'],
    bottom: 'rgba(149, 207, 248, 1)'
  }
});

const getTableData = () => {
  history(queryTime.value).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      table.value.data = data;
    }
  });
};

const getChartData = () => {
  const requestData = queryTime.value;
  getTrafficTypeData(trafficTypeDimension.value);
 
  area(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      trafficArea.value.data = data.map(({ area, value }) => {
        return {
          name: area,
          value
        };
      });
    }
  });
  carTypeStatic(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      carType.value.data = data.map(({ type, value }) => {
        return {
          name: type,
          value
        };
      });
    }
  });
  weather(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      weatherType.value.data = data.map(({ type, value }) => {
        return {
          name: type,
          value
        };
      });
    }
  });
  road(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      accidentProneRoad.value = data;
    }
  });
  junction(requestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      accidentProneCrossing.value = data;
    }
  });
};

const getTrafficTypeData = (dimension) => {
  trafficTypeDimension.value = dimension;
  let request = dimension === 0?typeForCar:typeForTime;
  request().then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      trafficType.value.data = data.map(({ type, value }) => {
        return {
          name: type,
          value
        };
      });
    }
  });
}
getTableData();
getChartData();

</script>
<style lang="less" scoped>
.left {
  width: 75%;
  height: 100%;
}

.right {
  width: calc((100% - var(--hMargin)) * 0.25);
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.content_table {
  width: calc((100% - var(--hMargin)) * 0.75);
  left: 0;
  top: 0;
  bottom: calc(
    (100% - var(--vMargin) - var(--vMargin)) * 0.3334 + var(--vMargin)
  );
  position: absolute;
  padding: 1.25rem 1.75rem;
}

.content_chart {
  width: calc((100% - var(--hMargin)) * 0.75);
  height: calc((100% - var(--vMargin) - var(--vMargin)) * 0.3334);
  bottom: 0;
  left: 0;
  position: absolute;
}

.tabs {
  position: absolute;
  height: 2.75rem;
  top: -2.75rem;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}
.tabs > div {
  width: 0;
  height: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
}
.tabs > span {
  cursor: pointer;
}
.tabs .checked {
  color: white;
}
</style>
